*{margin: 0;padding: 0;}
li{
    list-style: none;
}
.frame{
    margin: 0 auto;
    width:1225px;
    height: 460px;
}

.roll-icons{
    width:1225px;
    height:460px;
    position: relative;
    

}
.roll-icons img{
    width:1225px;
    height:460px;
    position: absolute;
    z-index: 100;
}
.roll-icons button{
    border:none;
    cursor: pointer;
    position: absolute;
    width:40px;
    height: 70px;
    background:url('../images/icon-slides.png');
    z-index: 200;
}
.prev:hover{
    border:none;
    
    
}
.position-center-y{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
.roll-icons button:nth-of-type(1){
  
    position: absolute;
    top:50%;
    transform: translateY(-50%);
   
    background-position-x: 81px;
    margin-left:235px;
}
.roll-icons button:nth-of-type(2){
    right:0;
    background-position-x: 41px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
.roll-point{
    position: absolute;
    right:0;
    bottom:0;
    transform: translate(-30px,-25px);
    width:100px;
    height: 10px;
    z-index: 300;
    text-align: center;
    
}
.roll-point span{
    display: inline-block;
    
    width:10px;
    height:10px;
    margin:0 3px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgb(91, 93, 94);
    box-sizing: border-box;
}
.roll-point span:hover{
    background:rgb(91, 93, 94);
    
}
.roll-point .active{
    background: rgb(172, 168, 168);
}
